<template>
    <div class="password-container">
      <div class="title-bar">
        <div class="blue-line"></div>
        <span class="title">修改密码</span>
      </div>
  
      <div class="form-wrapper">
        <div class="form-item">
          <label>原密码：</label>
          <input 
            type="password" 
            v-model="passwordForm.oldPassword"
            class="password-input"
            placeholder="请输入原密码"
          >
        </div>
  
        <div class="form-item">
          <label>新密码：</label>
          <input 
            type="password" 
            v-model="passwordForm.newPassword"
            class="password-input"
            placeholder="请输入新密码"
          >
        </div>
  
        <div class="form-item">
          <label>确认新密码：</label>
          <input 
            type="password" 
            v-model="passwordForm.confirmPassword"
            class="password-input"
            placeholder="请再次输入密码"
          >
        </div>
  
        <div class="form-footer">
          <button class="save-btn" @click="handleUpdatePassword">保存</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    name: 'UpdatePassword',
    data() {
      return {
        passwordForm: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        }
      }
    },
    methods: {
      handleUpdatePassword() {
        // 处理密码修改逻辑
        if (!this.passwordForm.oldPassword) {
          this.$message.error('请输入原密码')
          return
        }
        if (!this.passwordForm.newPassword) {
          this.$message.error('请输入新密码')
          return
        }
        if (!this.passwordForm.confirmPassword) {
          this.$message.error('请确认新密码')
          return
        }
        if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
          this.$message.error('两次输入的密码不一致')
          return
        }
        
        // 调用接口修改密码
        // TODO: 实现修改密码的API调用
        axios.post('/api/users/users/updatePassword', this.passwordForm).then(res => {
            if(res.data.code == 200) {
                this.passwordForm = {};
                this.$message.success('修改密码成功');
            } else {
                this.$message.error(res.data.data);
            }
        })


      }
    }
  }
  </script>
  
  <style scoped>
  .password-container {
    padding: 24px;
    background: #fff;
    min-height: 100vh;
  }
  
  .title-bar {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
  }
  
  .blue-line {
    width: 4px;
    height: 16px;
    background: #0052FF;
    margin-right: 8px;
    border-radius: 2px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }
  
  .form-wrapper {
    padding: 0 20px;
  }
  
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
  }
  
  .form-item label {
    width: 100px;
    text-align: right;
    margin-right: 16px;
    color: #333;
    font-size: 14px;
  }
  
  .password-input {
    width: 320px;
    height: 36px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 14px;
    color: #333;
    background: #F5F7FA;
  }
  
  .password-input:focus {
    outline: none;
    border-color: #0052FF;
  }
  
  .password-input::placeholder {
    color: #999;
  }
  
  .form-footer {
    padding-left: 116px;
    margin-top: 40px;
  }
  
  .save-btn {
    width: 88px;
    height: 32px;
    background: #0052FF;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  
  .save-btn:hover {
    background: #0045d6;
  }
  </style>